<template>
  <div class="login-body-login-input" :style="{'width':w}">
    <input class="input-box" :placeholder="showHolder" v-model="v"></input>
  </div>
</template>

<script>
export default {
  name:'InputBox',
  computed:{
    showHolder:function (){
        if(this.required)return '*'+this.holder;
        else return this.holder;
    }
  },
  props:{
    w:{
      type:String,
      default:'600px'
    },
    holder:{
      type:String,
      default:'请输入内容'
    },
    v:{
      type:String,
    },
    required:{
      type:Boolean,
      default:false,
    }
  },
  created() {
    console.log(this.w,this.holder)
  }
}
</script>

<style scoped>
.login-body-login-input{
  height: 75px;
  background-color: #EEEDEC;
  border-radius: 20px 20px 0px 0px;
  border-bottom: 5px solid #A9C7FF;
  line-height: 75px;
  padding-left: 30px;
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.075em;
  color: #B5B5B5;
}
.input-box{
  border:0;
  outline: 0;
  width: 90%;
}
</style>